<template>
  <div>
    <el-card>
      <div>
        <div class="detail-header">
          <h3>{{ detail.title }}</h3>
          <div class="detail-back" @click="$router.history.go(-1)">返回</div>
        </div>
        <div class="detail-nav">
          <span>发布时间：{{ detail.created_time || "暂无" }}</span>
        </div>
        <markdown-it-vue class="md-body" :content="detail.text" />
        <!-- <mavon-editor
            class="md"
            :value="detail.text"
            :subfield="false"
            :ishljs="true"
            defaultOpen="preview"
            codeStyle="atom-one-dark"
            :toolbarsFlag="false"
            :editable="false"
            :scrollStyle="true"
        /> -->
      </div>
      <div class="comment">文章评论</div>
      <div class="comment-nav">
        <div class="comment-login" @click="dialogVisible = true">{{ users != '' ? users.account : '登录' }}</div>
        <label>
          <textarea
              rows="3"
              cols="20"
              placeholder="想对博主说些什么？"
              v-model="value"
              class="comment-input"
          />
        </label>
        <div class="comment-btn" @click="getComments">评论一下</div>
      </div>
      <div class="comment-list">
        <div style="display: flex;justify-content: space-between">
          <div class="comment-list-title">评论</div>
          <span style="margin-right: 10px">共有 {{this.total || 0}}人评论</span>
        </div>
        <div class="comment-list-nav">
          <div style="color:crimson;font-size: 18px;">最新评论：</div>
          <div>
            <div v-for="item in commentdetail" :key="item._id" style="padding: 10px 0;border-bottom: 1px dashed #aaa">
              <div class="comment-title">{{item.Uid== null? '': item.Uid.account}}<span style="margin-left: 5px;color: #333;">说：</span></div>
              <div class="comment-detail-nav">
                <span>{{item.content}}</span><span>{{item.created_time}}</span>
              </div>
              <div class="comment-bo" v-for="val in item.lists" :key="val._id">
                <div class="comment-bo-flex">
                  <div>
                    <span>博主回复：</span>{{val.content}}
                  </div>
                  <div>
                    {{val.created_time}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="dialogVisible" class="mask" @mousewheel.prevent>
        <div class="wind">
          <div>
            <div class="wind-title">
              <span :class="type === 1 ? 'bb' : ''" @click="type = 1"
              >登录</span
              >
              <span :class="type === 2 ? 'bb' : ''" @click="type = 2"
              >注册</span
              >
            </div>
            <div style="padding: 20px;">
              <el-form label-width="100px" :model="froms" :rules="rules" ref="login">
                <el-form-item label="账户名称：" prop="account">
                  <el-input v-model="froms.account"></el-input>
                </el-form-item>
                <el-form-item label="账户密码：" prop="password">
                  <el-input v-model="froms.password"></el-input>
                </el-form-item>
                <el-button type="primary" @click="getLogin">{{
                    type === 1 ? "登录" : "注册"
                  }}
                </el-button>
                <el-button type="primary" @click="dialogVisible = false"
                >取消
                </el-button
                >
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Detail",
  props: ["id"],
  data() {
    return {
      detail: {},
      dialogVisible: false,
      value: "",
      type: 1,
      froms: {
        account: "",
        password: ""
      },
      users: '',
      rules: {
        account: [
          {required: true, message: "请输入账号名称", trigger: "blur"},
        ],
        password: [
          {required: true, message: "请输入账号密码", trigger: "blur"},
        ]
      },
      commentdetail:[],
      total: 0
    };
  },
  mounted() {
    if (sessionStorage.user) {
      this.users = JSON.parse(sessionStorage.user)
    }
    this.id && this.getdetail();
    this.getCommentlist()
  },
  methods: {
    // 文章详情
    getdetail() {
      this.axios.get(`/rest/article/${this.id}`).then(res => {
        this.detail = res.data;
      });
    },
    // 获取评论列表
    getCommentlist() {
        this.axios.get(`/rest/comment/comment/${this.id}`).then(res=> {
          this.commentdetail = res.data.items
          this.total = res.data.total
          this.$store.commit('setTotal',res.data)
        })
    },
    // 登录
    getLogin() {
      this.$refs.login.validate(async vaild => {
        if (vaild) {
          if (this.type === 1) {
            this.axios.post(`/login`, this.froms).then(res => {
              sessionStorage.user = JSON.stringify(res.data.data)
              if (res.status == 200) {
                this.$notify.success({
                  title: '登录',
                  message: `${res.data.data.account},登录成功！`,
                  offset: 100,
                  duration: 2000
                });
              }
              this.users = JSON.parse(sessionStorage.user)
              this.$refs.login.resetFields();
              this.dialogVisible = false
            })
          } else {
            this.axios.post(
                "/rest/admin_user/register",
                this.froms
            ).then(res => {
              sessionStorage.user = JSON.stringify(res.data)
              if (res.status == 200) {
                this.$notify.success({
                  title: '注册',
                  message: `${res.data.account},注册成功！`,
                  offset: 100,
                  duration: 2000
                });
              }
              this.users = JSON.parse(sessionStorage.user)
              this.$refs.login.resetFields();
              this.dialogVisible = false
            })
          }
        } else {
          this.$notify.error({
            title: '错误',
            message: '请将数据补充完整',
            offset: 100,
            duration: 2000
          });
        }
      })
    },
    // 评论
    getComments() {
      if (this.users != '') {
        let data = {
          Aid: this.id,
          Uid: this.users._id,
          content: this.value
        }
        if (this.value == '') {
          this.$message.error('要对博主说些什么呢？')
        }else  {
          this.axios.post(`/rest/comment/addcomment`, data).then(res => {
            if (res.status == 200) {
              this.$message.success('评论成功！')
              this.value = ''
              this.getCommentlist()
            }
          })
        }
      } else {
        this.$notify.info({
          title: '提示',
          message: `请先进行登录哦~`,
          offset: 100,
          duration: 2000
        });
      }
    },

  }
};
</script>

<style lang="less" scoped>
.detail-header {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  justify-content: space-between;
  align-items: center;

  .detail-back {
    width: 60px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: darkseagreen;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
  }
}

.detail-nav {
  height: 30px;
  padding-left: 10px;
}

.comment {
  margin-top: 20px;
  border-bottom: 1px solid #111;
  padding: 10px;
  font-size: 22px;
}

.comment-nav {
  position: relative;
  min-height: 100px;
  height: 100%;
  width: 100%;
  margin-top: 50px;
  margin-bottom: 40px;
  border: 1px solid crimson;
  border-radius: 10px;
  padding: 10px;

  .comment-login {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 12px;
    border: 1px solid crimson;
    border-radius: 50%;
    position: absolute;
    background-color: #fff;
    color: crimson;
    top: -40px;
    cursor: pointer;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
  }

  .comment-btn {
    width: 70px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #ffffff;
    border-radius: 5px;
    background-color: #da234e;
    position: absolute;
    bottom: -25px;
    left: 90%;
    cursor: pointer;
  }

  .comment-input {
    width: 100%;
    background: none;
    outline: none;
    border: none;
  }
  input[type="text"]:focus {
  }

  input[type="password"]:focus {
    border: 1px solid #eb7350;
    background: #fff;
    outline: none;
  }
}
.comment-list {
  margin-top: 10px;
  width: 100%;
  height: 100%;
  .comment-list-title {
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 1px solid crimson;
    background-color: #fff;
    border-radius: 5px;
    position: relative;
    bottom: -3px;
  }
  .comment-list-nav {
    width: 100%;
    height: 100%;
    border-top: 1px solid crimson;
    padding: 10px;
  }
  .comment-title {
    color: crimson;
    padding-left: 10px;
    height: 20px;
  }
  .comment-detail-nav {
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
  }
  .comment-bo {
    padding-left: 40px;
    padding-right: 20px;
    .comment-bo-flex {
      display: flex;
      justify-content: space-between;
      span {
        color: palevioletred;
      }
    }
  }
}
.fixedHeight {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.mask {
  position: fixed;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;

  .wind {
    width: 30%;
    height: 300px;
    position: relative;
    text-align: center;
    border-radius: 10px;
    background-color: #fff;

    .wind-title {
      display: flex;
      justify-content: center;
      align-items: flex-start;

      span {
        margin: 10px 5px;
        font-size: 20px;
        cursor: pointer;
        font-weight: 700;
      }

      .bb {
        border-bottom: 2px solid crimson;
      }
    }
  }
}
</style>
